.block{
  display: block;
}
.inline{
  display: inline;
}
.inline-block{
  display: inline-block;
}
.none{
  display: none;
}

/* 文本对齐 */
.text-left{
  text-align: left;
}
.text-center{
  text-align: center;
}
.text-right{
  text-align: right;
}

/* 文本换行 */
.text-wrap{
  text-wrap: wrap;
}
.text-nowrap{
  text-wrap: nowrap;
}

/* 字体粗细 - 对应 细、默认、粗 */
.fw-400{
  font-weight: 400;
}
.fw-500{
  font-weight: 500;
}
.fw-700{
  font-weight: 700;
}

/* 定位 */
.relative{
  position: relative;
}
.absolute {
  position: absolute;
}

/* 两行省略 */
.ellipsis{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* flex布局 */

@for $i from 1 to 3{
  .flex-#{$i} {
    flex: $i;
  }
}
.flex {
  display: flex;
}
/* flex 布局方向 */
.flex-row {
  @extend .flex;
  flex-direction: row;
}
.flex-row-reverse {
  @extend .flex;
  flex-direction: row-reverse;
}
.flex-col {
  @extend .flex;
  flex-direction: column;
}
.flex-col-reverse {
  @extend .flex;
  flex-direction: column-reverse;
}
/* flex 自动换行 */
.flex-wrap {
  @extend .flex;
  flex-wrap: wrap;
}
.flex-nowrap {
  @extend .flex;
  flex-wrap: nowrap;
}
.flex-wrap-reserve {
  @extend .flex;
  flex-wrap: wrap-reverse;
}
/* flex 水平布局  */
.justify-start {
  @extend .flex;
  justify-content: flex-start;
}
.justify-end {
  @extend .flex;
  justify-content: flex-end;
}
.justify-center {
  @extend .flex;
  justify-content: center;
}
.justify-between {
  @extend .flex;
  justify-content: space-between;
}
.justify-around {
  @extend .flex;
  justify-content: space-around;
}
.justify-evenly {
  @extend .flex;
  justify-content: space-evenly;
}
/* flex 垂直布局 */
.align-start {
  @extend .flex;
  align-items: flex-start;
}
.align-center {
  @extend .flex;
  align-items: center;
}
.align-end {
  @extend .flex;
  align-items: flex-end;
}
.align-baseline {
  @extend .flex;
  align-items: baseline;
}

.full {
  width: 100%;
  height: 100%;
}
.w-full {
  width: 100%;
}
.h-full {
  height: 100%;
}
.w-vw{
  width: 100vw;
}
.h-vw{
  height: 100vw;
}
.h-vh{
  height: 100vh;
}

/* 内外边距 */

@for $i from 8 to 60{
.m-#{$i}{
  margin: #{$i}rpx;
}
.m-h-#{$i}{
  margin: auto #{$i}rpx;
}
.m-v-#{$i}{
  margin: #{$i}rpx auto;
}
.mt-#{$i}{
  margin-top: #{$i}rpx;
}
.mr-#{$i}{
  margin-right: #{$i}rpx;
}
.mb-#{$i}{
  margin-bottom: #{$i}rpx;
}
.ml-#{$i}{
  margin-left: #{$i}rpx;
}
.p-#{$i}{
  padding: #{$i}rpx;
}
.p-h-#{$i}{
  padding: auto #{$i}rpx;
}
.p-v-#{$i}{
  padding: #{$i}rpx auto;
}
.pt-#{$i}{
  padding-top: #{$i}rpx;
}
.pr-#{$i}{
  padding-right: #{$i}rpx;
}
.pb-#{$i}{
  padding-bottom: #{$i}rpx;
}
}


.m-0{
  margin: 0;
}
.m-h-0 {
  margin: auto 0;
}
.m-v-0 {
  margin: 0 auto;
}
.mt-0{
  margin-top: 0;
}
.mr-0{
  margin-right: 0;
}
.mb-0{
  margin-bottom: 0;
}
.ml-0{
  margin-left: 0;
}
.p-0 {
  padding: 0;
}
.p-h-0 {
  padding: auto 0;
}
.p-v-0 {
  padding: 0 auto;
}
.pt-0 {
  padding-top: 0;
}
.pr-0 {
  padding-right: 0;
}
.pb-0 {
  padding-bottom: 0;
}
.pl-0 {
  padding-left: 0;
}







